<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>merchantInfo</title>

<style type="text/css">
	.info_status_li{
		list-style: none;
		margin-top:25px;
		margin-bottom:25px;
		margin-right:200px;
	}
	.info_status_a{
		color: #fff;
	}
	
    .info_right {
       margin-left: 160px;
      width: 70%;
      height: 80%;
    }
    .info_right_css { background-color: #fff; }
    .info_header_css {
    	margin-top:-20px;
    	width: 100%;
        height: 100px;
    	background-color: rgb(26,188,156);
    	color: #fff;
    	text-align: center;
        vertical-align: middle;
        cursor: pointer;
        font-size: 36px;
        line-height: 36px;
        font-weight: 20px;
        border: 0;
        outline: 0;
   	}
   	.info-table{
   		border-collapse:collapse;  
    	border-spacing:0;  
   	}
   	.menu-ul{
   	list-style:none;
   	padding-left:50px;
   	width:100%;
   	height:50px;
   	background-color:#0AE;
   	margin-top:0px;
   	}
   	.menu-ul li{
   	padding-top:-20px;
   	float:left;
   	magrin-left:100px;
   	padding-top:0px;
   	}
   	.menu-ul>li>a{
   	float:left;
   	padding-left:100px;
   	text-decoration:none;
   	}
   	.btn-green{
   			text-align: center;
            vertical-align: middle;
            cursor: pointer;
            width: 120px;
            height: 40px;
            font-size: 18px;
            line-height: 36px;
            color: #fff;
            font-weight: 0;
            border: 0;
            outline: 0;
            background: #0AE;
            border-radius: 4px;
   	}
   	.header-text{
   		padding-top:40px;
   	}
   	.info_home_css {
   		float: right;
   	}
   
   	.btn{
   		text-align: center;
           vertical-align: middle;
            cursor: pointer;
            width: 60px;
            height: 30px;
            font-size: 16px;
            line-height: 36px;
            border-radius: 4px;
             color: #fff;
            font-weight: 0;
            border: 0;
            outline: 0;
   	}
   	.red{
        background: rgb(199,29,36);
   	}
   		.blue{
            background: #0AE;
            width:160px;
   	}
   	.black{
   	 background: #000;
   	 width:160px;
   	}
   	.green{
   	 background: rgb(31,166,122);
   	}
   	td{
   	text-align: center;
    vertical-align: middle;
    width:200px;
   	}
   	img{
   		width:100px;
   		height:150px;
   	}
   	
</style>
</head>
<body>
<input id="myStatus" hidden value="${myStatus} ">
	<div class="info_header_css">
		<center><div class="header-text">O2O Admin</div></center>
	</div>
	<div class="info_left">
		<div class="info_left_css">
			<ul class="menu-ul">
				<li class="info_status_li">	<a href="/admins/merchant/audit/wait" class="info_status_a">Home</a> </li>
				
				<li class="info_status_li">	<a href="${pageContext.request.contextPath}/merchant/status/type?status=success" class="info_status_a">success</a> </li>
				
				<li class="info_status_li"><a href="${pageContext.request.contextPath}/merchant/status/type" class="info_status_a">all</a></li>
				<li class="info_status_li">	<a class="info_status_a">welcome：${sessionScope.name}</a> </li>
			</ul>
		</div>
	</div>
	<div class="info_right">
		<div class="info_right_css">
			<table border="1" class="info-table" id="merchantInfo">
				<tr>
					<th style="width:200px">name</th>
					<th style="width:200px">id_card</th>
					<th style="width:200px">avatar</th>
					<th style="width:200px">address</th>
					<th style="width:200px">status</th>
					<th style="width:200px">operation</th>
				</tr>
				<c:forEach items="${merchants }" var="merchant">
					<tr>
						<td>${merchant.name }</td>
						<td><img src="${pageContext.request.contextPath}/merchant/info/idcard?name=${merchant.name }" alt="idCard" width="100" height="150"></td>
						<td><img src="${imagepath}${merchant.avatar }" alt="avatar" width="100" height="150"></td>
						<td>${merchant.address }</td>
						<td>${merchant.status }</td>
						<c:if test="${merchant.status=='black_list'}">
							<td><button class="btn blue" onclick="whiteF(this)">add to white_list</button></td>
						</c:if>
						<c:if test="${merchant.status=='white_list'}">
							<td><button class="btn black" onclick="blackF(this)">add to black_list</button></td>
						</c:if>
						<c:if test="${merchant.status=='reject'}">
							<td></td>
						</c:if>
						<c:if test="${merchant.status=='audit'}">
							<td>
								<a href="${pageContext.request.contextPath}/merchant/audit/wdetail?name=${merchant.name }"><button class="btn blue">audit</button></a>
								
							</td>
						</c:if>
					</tr>
				</c:forEach>	
			</table>
		</div>
	</div>
	
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	
	<script src="/admins/dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="/admins/dist/sweetalert.css">
	
	<script type="text/javascript">
         $(function(){
             $(document).ready(function(){
            	 var version = new Date().getTime();
            	console.log("/admins/merchant/api/status?status=${myStatus}");
                 function getallInfo(){
                	 version = new Date().getTime();
                    $.ajax({
                        type:"GET",
                        url:"/admins/merchant/api/status?status="+$("#myStatus").val(),
                        dataType: "json",
                        success: function(msg){
                        	 console.log("/admins/merchant/api/status?status="+$("#myStatus").val());
                        	 console.log(msg);
                           $("#merchantInfo tr").not(":first-child").remove(); 
                             $.each(msg.data, function(index, content){
                            	 console.log(content);
                                var tr = $("<tr></tr>");
                                tr.append($("<td></td>").attr("style","width:200px").text(content.name));
                                tr.append($("<td> <img src="+content.idCard+"></td>").attr("style","width:200px"));
                                tr.append($("<td><img src="+content.avatar+"></td>").attr("style","width:200px"));
                                tr.append($("<td></td>").attr("style","width:200px").text(content.address));
                                tr.append($("<td></td>").attr("style","width:200px").text(content.status));
                                var operationTd = $("<td></td>").attr("style","width:200px");
                                var status = content.status;
                                if(status == 'black_list'){
                                   var oButton = $("<button>add to white_list</button>").attr("class","btn blue").attr("style","width:160px").click(function(){
                                	 whiteF(this);
                                   });
                                   operationTd.append(oButton);
                                }
                                if(status == 'white_list'){
                                   var oButton = $("<button>add to black_list</button>").attr("class","btn black").attr("style","width:160px").click(function(){
                                	   blackF(this);
                                   });
                                   operationTd.append(oButton);
                                }
                                if(status == "audit"){
                                   var passhref = $("<a href=/admins/merchant/audit/wdetail?name="+content.name+"&operation=white_list"+"></a>"); 
                                   var passButton = $("<button>audit</button>").attr("class","btn blue");
                                   passhref.append(passButton);
                                   operationTd.append(passhref);
                                }
                                tr.append(operationTd);
                                $("#merchantInfo").append(tr);
                            });  
                        }
                    })
                     
               
                }
                 
                
               setInterval(function(){getFlag();},1000);
             
                 function getFlag(){
                	$.ajax({
                		type:"GET",
                		url:"/admins/merchant/api/audit/status/version",
                		dataType: "json"
                	}).done(function(msg){
                		if(version<msg.version){
                			getallInfo()
                		}
                	})
                }
                 //white
               whiteF = function(buttonf){
                	 var button = $(buttonf);
                     var nameV = button.parent().parent().find("td:eq(0)").text();
                      var idCardV = button.parent().parent().find("td:eq(1)").text();
                      var avatarV = button.parent().parent().find("td:eq(2)").text();
                      var addressV = button.parent().parent().find("td:eq(3)").text();
                      var operation = "white_list";
                    var user = {name:nameV,operation:operation};
                    console.log(user);
                   changeAlert(user,"white list");
                 };
                 
                function changeAlert(user,list){
                	 swal({
                   	  title: "Are you sure?",
                   	  text: "you try to add "+user.name+" to "+list,
                   	  type: "warning",
                   	  showCancelButton: true,
                   	  confirmButtonColor: "#DD6B55",
                   	  confirmButtonText: "Yes, add to "+list+"!",
                   	  cancelButtonText: "No, cancel plx!",
                   	  closeOnConfirm: false,
                   	  closeOnCancel: false
                   	},
                   	function(isConfirm){
                   	  if (isConfirm) {
                   		  changeStatus(user,list);
                   	  } else {
                   		  swal("Cancelled", "")
                   	  }
                   	});
                 }
                 
                 
                 function changeStatus(user,list){
                	  $.ajax({
                          type:"POST",
                          url:"/admins/merchant/api/update/status",
                          data:JSON.stringify(user),
                          contentType:"application/json",
                          dataType: "json",
                          success: function(msg){
                          	console.log(msg);
                               if(msg == '-1'){
                            	   swal("Error", msg.message, "error");
                              }else{
                              	getallInfo();
                              	swal("Update!", user.name+" aready in "+list, "success");
                              }
                          }
                      })
                 }
                 
                 //black
                  blackF = function(buttonf){
                	 var button = $(buttonf);
                     var nameV = button.parent().parent().find("td:eq(0)").text();
                      var idCardV = button.parent().parent().find("td:eq(1)").text();
                      var avatarV = button.parent().parent().find("td:eq(2)").text();
                      var addressV = button.parent().parent().find("td:eq(3)").text();
                      var operation = "black_list";
                    var user = {name:nameV,operation:operation};
                    console.log(user);
                    changeAlert(user,"black list");
                 };
            });
          

        })
    </script>
	
</body>
</html>